import { Replay, PlayerConfiguration } from 'vimond-replay'
import 'vimond-replay/index.css'

const getRandId = () => Math.random().toString(16).slice(2)

type itemProps = {
  id: string | number
  name: string | number
  src: string
}

const list: itemProps[] = [...new Array(10)].map(() => ({
  id: getRandId(),
  name: getRandId(),
  src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
}))

const replayOptions: PlayerConfiguration = {
  controls: {
    includeControls: ['playPauseButton', 'timeline', 'timeDisplay', 'volume', 'fullscreenButton'],
  },
  interactionDetector: {
    inactivityDelay: 10,
  },
}

const ListPage = () => {
  // console.log(list)
  return (
    <>
      {list.map(item => (
        <div className="mb-5" key={item.id}>
          <Replay source={item.src} initialPlaybackProps={{ isPaused: true }} options={replayOptions} />
        </div>
      ))}
    </>
  )
}

export default ListPage
